import {mapGetters} from 'vuex';
import storageHelper from '@/utils/storageHelper.js';

export default {
    data() {
        return {
            containerStyleObject: {
                width: '100%',
                height: '85%',
                display: 'block',
            },
            containerTwoStyleObject: {
                width: '100%',
                height: '45%',
                display: 'none',
                marginTop: '8px'
            },
            containerOneStyleObject: {
                width: '100%',
                height: '45%',
                display: 'none'
            },
            filters: {
                positionId: '',
                dimension: '',
                year: '',
                month: '',
                day: '',
                riskType: '',
                score: '',
            },
            riskPositionName: '',
            dimensionOptions: [
                {id: 'year', name: '年'},
                {id: 'month', name: '月'},
                {id: 'day', name: '日'}
            ],
            kLineChartOption: null,
            lineChartOption: null,
            riskMeasures: '',
            riskReasons: ''
        }
    },
    computed: {
        ...mapGetters([
            'riskPositionOptions'
        ])
    },
    mounted() {
        this.initKLineChartOption();
        this.initLineChartOption();
        //获取路由传参
        if (Object.keys(this.$route.query).length > 0) {
            this.filters = Object.assign({}, this.$route.query)

            this.filters.positionId = Number(this.filters.positionId);
            this.riskPositionName = this.filters.riskPositionName;
            console.log(this.riskPositionName);
            if (this.filters.positionId > 49 && this.filters.positionId < 58) {
                this.containerStyleObject.display = 'none';
                this.containerOneStyleObject.display = 'block';
                this.containerTwoStyleObject.display = 'block';
            } else {
                this.containerStyleObject.display = 'block';
                this.containerOneStyleObject.display = 'none';
                this.containerTwoStyleObject.display = 'none';
            }

            if (this.filters.score) {
                let params = {
                    riskType: this.filters.riskType,
                    score: this.filters.score
                };
                this.$store.dispatch('getRiskReasonInfo', params).then((res) => {
                    if (res.measures.length > 0) {
                        this.riskMeasures = res.measures.join("、");
                    }
                    if (res.reasons.length > 0) {
                        this.riskReasons = res.reasons.join("、");
                    }


                    this.handleSearchByDay();
                });

            } else {
                this.handleSearchByDay();
            }
        }
    },
    methods: {
        handleRiskPosition: function (value) {

            if (value) {
                if (this.filters.positionId > 49 && this.filters.positionId < 58) {
                    this.containerStyleObject.display = 'none';
                    this.containerOneStyleObject.display = 'block';
                    this.containerTwoStyleObject.display = 'block';
                } else {
                    this.containerStyleObject.display = 'block';
                    this.containerOneStyleObject.display = 'none';
                    this.containerTwoStyleObject.display = 'none';
                }

                this.riskPositionOptions.forEach(item => {
                    if (value == item.id) {
                        this.riskPositionName = item.riskPosition;
                    }
                });

                if (this.filters.dimension) {
                    if (this.filters.year) {
                        this.handleSearchByYear();
                    } else if (this.filters.month) {
                        this.handleSearchByMonth();
                    } else if (this.filters.day) {
                        this.handleSearchByDay();
                    }
                }
            }
        },
        handleReport: function () {
            if (!this.filters.positionId) {
                this.$alert('请选择风险点', '提示', {
                    confirmButtonText: '确定',
                    type: 'error',
                    closeOnClickModal: true,
                    center: true
                });
                return;
            }

            if (!this.filters.dimension) {
                this.$alert('请选择时间', '提示', {
                    confirmButtonText: '确定',
                    type: 'error',
                    closeOnClickModal: true,
                    center: true
                });
                return;
            }
            if (this.filters.positionId > 49 && this.filters.positionId < 58) {
                let chartOne = this.$echarts.init(document.getElementById("containerOne"));
                let chartTwo = this.$echarts.init(document.getElementById("containerTwo"));

                let params = {};
                if (this.filters.dimension == 'year') {
                    params = {
                        chartT: chartOne.getDataURL("png").replace(/^data:image\/\w+;base64,/, ''),
                        chartH: chartTwo.getDataURL("png").replace(/^data:image\/\w+;base64,/, ''),
                        positionId: this.filters.positionId,
                        year: this.filters.year
                    }
                    this.$store.dispatch('reportThosForYear', params).then((res) => {
                        let url = this.$baseURL + '/report/downland?token=' + storageHelper.get('efws_manage_token') + '&docId=' + res.docId + '&title=' + res.title;
                        window.open(url);
                    });
                } else if (this.filters.dimension == 'month') {
                    params = {
                        chartT: chartOne.getDataURL("png").replace(/^data:image\/\w+;base64,/, ''),
                        chartH: chartTwo.getDataURL("png").replace(/^data:image\/\w+;base64,/, ''),
                        positionId: this.filters.positionId,
                        year: this.filters.month.split('-')[0],
                        month: this.filters.month.split('-')[1]
                    }
                    this.$store.dispatch('reportThosForMonth', params).then((res) => {
                        let url = this.$baseURL + '/report/downland?token=' + storageHelper.get('efws_manage_token') + '&docId=' + res.docId + '&title=' + res.title;
                        window.open(url);
                    });
                } else if (this.filters.dimension == 'day') {
                    params = {
                        chartT: chartOne.getDataURL("png").replace(/^data:image\/\w+;base64,/, ''),
                        chartH: chartTwo.getDataURL("png").replace(/^data:image\/\w+;base64,/, ''),
                        positionId: this.filters.positionId,
                        year: this.filters.day.split('-')[0],
                        month: this.filters.day.split('-')[1],
                        day: this.filters.day.split('-')[2]
                    }
                    this.$store.dispatch('reportThosForDay', params).then((res) => {
                        let url = this.$baseURL + '/report/downland?token=' + storageHelper.get('efws_manage_token') + '&docId=' + res.docId + '&title=' + res.title;
                        window.open(url);
                    });
                }
            } else {
                var myChart = this.$echarts.init(document.getElementById("container"));
                let params = {};
                if (this.filters.dimension == 'year') {
                    params = {
                        chart: myChart.getDataURL("png").replace(/^data:image\/\w+;base64,/, ''),
                        positionId: this.filters.positionId,
                        year: this.filters.year
                    }
                    this.$store.dispatch('reportForYear', params).then((res) => {
                        let url = this.$baseURL + '/report/downland?token=' + storageHelper.get('efws_manage_token') + '&docId=' + res.docId + '&title=' + res.title;
                        window.open(url);
                    });
                } else if (this.filters.dimension == 'month') {
                    params = {
                        chart: myChart.getDataURL("png").replace(/^data:image\/\w+;base64,/, ''),
                        positionId: this.filters.positionId,
                        year: this.filters.month.split('-')[0],
                        month: this.filters.month.split('-')[1]
                    }
                    this.$store.dispatch('reportForMonth', params).then((res) => {
                        let url = this.$baseURL + '/report/downland?token=' + storageHelper.get('efws_manage_token') + '&docId=' + res.docId + '&title=' + res.title;
                        window.open(url);
                    });
                } else if (this.filters.dimension == 'day') {
                    params = {
                        chart: myChart.getDataURL("png").replace(/^data:image\/\w+;base64,/, ''),
                        positionId: this.filters.positionId,
                        year: this.filters.day.split('-')[0],
                        month: this.filters.day.split('-')[1],
                        day: this.filters.day.split('-')[2]
                    }
                    this.$store.dispatch('reportForDay', params).then((res) => {
                        let url = this.$baseURL + '/report/downland?token=' + storageHelper.get('efws_manage_token') + '&docId=' + res.docId + '&title=' + res.title;
                        window.open(url);
                    });
                }
            }


        },
        handleSearchByYear: function () {
            if (!this.filters.year) {
                return;
            }

            if (this.filters.positionId > 49 && this.filters.positionId < 58) {

                Promise.all([
                    this.$store.dispatch('getYearMeterList', {
                        positionId: this.filters.positionId,
                        year: this.filters.year
                    }),
                    this.$store.dispatch('getYearMeterList', {
                        positionId: this.filters.positionId * 10,
                        year: this.filters.year
                    })
                ]).then(res => {
                    if (res.length > 0) {
                        let chart = this.$echarts.init(document.getElementById("containerOne"));
                        let transformData = JSON.parse(JSON.stringify(res[0]));
                        let chartData = this.transformKLineChartData(transformData);

                        //初始化K线图表配置
                        this.kLineChartOption.title.text = this.riskPositionName + ' (温度)';
                        this.kLineChartOption.legend.data[0] = '月K';
                        this.kLineChartOption.series[0].name = '月K';
                        this.kLineChartOption.series[0].data = chartData.values;
                        this.kLineChartOption.series[1].data = chartData.MAValue;
                        this.kLineChartOption.xAxis.data = chartData.categoryData;
                        if (this.kLineChartOption && typeof this.kLineChartOption === "object") {
                            chart.setOption(this.kLineChartOption);
                        }

                        let chartTwo = this.$echarts.init(document.getElementById("containerTwo"));
                        let transformDataTwo = JSON.parse(JSON.stringify(res[1]));
                        let chartDataTwo = this.transformKLineChartData(transformDataTwo);

                        //初始化K线图表配置
                        this.kLineChartOption.title.text = this.riskPositionName + ' (湿度)';
                        this.kLineChartOption.legend.data[0] = '月K';
                        this.kLineChartOption.series[0].name = '月K';
                        this.kLineChartOption.series[0].data = chartDataTwo.values;
                        this.kLineChartOption.series[1].data = chartDataTwo.MAValue;
                        this.kLineChartOption.xAxis.data = chartDataTwo.categoryData;
                        if (this.kLineChartOption && typeof this.kLineChartOption === "object") {
                            chartTwo.setOption(this.kLineChartOption);
                        }
                    }
                })
            } else {
                this.$store.dispatch('getYearMeterList', {
                    positionId: this.filters.positionId,
                    year: this.filters.year
                }).then((res) => {
                    //初始化K线图表
                    let chart = this.$echarts.init(document.getElementById("container"));
                    let transformData = JSON.parse(JSON.stringify(res));
                    let chartData = this.transformKLineChartData(transformData);

                    //初始化K线图表配置
                    this.kLineChartOption.title.text = this.riskPositionName;
                    this.kLineChartOption.legend.data[0] = '月K';
                    this.kLineChartOption.series[0].name = '月K';
                    this.kLineChartOption.series[0].data = chartData.values;
                    this.kLineChartOption.series[1].data = chartData.MAValue;
                    this.kLineChartOption.xAxis.data = chartData.categoryData;
                    if (this.kLineChartOption && typeof this.kLineChartOption === "object") {
                        chart.setOption(this.kLineChartOption);
                    }
                });
            }

        },
        handleSearchByMonth: function () {
            if (!this.filters.month) {
                return;
            }
            if (this.filters.positionId > 49 && this.filters.positionId < 58) {
                Promise.all([
                    this.$store.dispatch('getMonthMeterList', {
                        positionId: this.filters.positionId,
                        year: this.filters.month.split('-')[0],
                        month: this.filters.month.split('-')[1]
                    }),
                    this.$store.dispatch('getMonthMeterList', {
                        positionId: this.filters.positionId * 10,
                        year: this.filters.month.split('-')[0],
                        month: this.filters.month.split('-')[1]
                    })
                ]).then(res => {
                    if (res.length > 0) {
                        let chart = this.$echarts.init(document.getElementById("containerOne"));
                        let transformData = JSON.parse(JSON.stringify(res[0]));
                        let chartData = this.transformKLineChartData(transformData);

                        //初始化K线图表配置
                        this.kLineChartOption.title.text = this.riskPositionName + ' (温度)';
                        this.kLineChartOption.legend.data[0] = '月K';
                        this.kLineChartOption.series[0].name = '月K';
                        this.kLineChartOption.series[0].data = chartData.values;
                        this.kLineChartOption.series[1].data = chartData.MAValue;
                        this.kLineChartOption.xAxis.data = chartData.categoryData;
                        if (this.kLineChartOption && typeof this.kLineChartOption === "object") {
                            chart.setOption(this.kLineChartOption);
                        }

                        let chartTwo = this.$echarts.init(document.getElementById("containerTwo"));
                        let transformDataTwo = JSON.parse(JSON.stringify(res[1]));
                        let chartDataTwo = this.transformKLineChartData(transformDataTwo);

                        //初始化K线图表配置
                        this.kLineChartOption.title.text = this.riskPositionName + ' (湿度)';
                        this.kLineChartOption.legend.data[0] = '月K';
                        this.kLineChartOption.series[0].name = '月K';
                        this.kLineChartOption.series[0].data = chartDataTwo.values;
                        this.kLineChartOption.series[1].data = chartDataTwo.MAValue;
                        this.kLineChartOption.xAxis.data = chartDataTwo.categoryData;
                        if (this.kLineChartOption && typeof this.kLineChartOption === "object") {
                            chartTwo.setOption(this.kLineChartOption);
                        }
                    }
                })
            } else {
                this.$store.dispatch('getMonthMeterList', {
                    positionId: this.filters.positionId,
                    year: this.filters.month.split('-')[0],
                    month: this.filters.month.split('-')[1]
                }).then((res) => {
                    //初始化K线图表
                    let chart = this.$echarts.init(document.getElementById("container"));
                    let transformData = JSON.parse(JSON.stringify(res));
                    let chartData = this.transformKLineChartData(transformData);

                    //初始化K线图表配置
                    this.kLineChartOption.title.text = this.riskPositionName;
                    this.kLineChartOption.legend.data[0] = '月K';
                    this.kLineChartOption.series[0].name = '月K';
                    this.kLineChartOption.series[0].data = chartData.values;
                    this.kLineChartOption.series[1].data = chartData.MAValue;
                    this.kLineChartOption.xAxis.data = chartData.categoryData;
                    if (this.kLineChartOption && typeof this.kLineChartOption === "object") {
                        chart.setOption(this.kLineChartOption);
                    }
                });

            }
        },
        handleSearchByDay: function () {
            if (!this.filters.day) {
                return;
            }
            if (this.filters.positionId > 49 && this.filters.positionId < 58) {
                Promise.all([
                    this.$store.dispatch('getDayMeterList', {
                        positionId: this.filters.positionId,
                        year: this.filters.day.split('-')[0],
                        month: this.filters.day.split('-')[1],
                        day: this.filters.day.split('-')[2]
                    }),
                    this.$store.dispatch('getDayMeterList', {
                        positionId: this.filters.positionId * 10,
                        year: this.filters.day.split('-')[0],
                        month: this.filters.day.split('-')[1],
                        day: this.filters.day.split('-')[2]
                    })
                ]).then(res => {
                    if (res.length > 0) {
                        let chart = this.$echarts.init(document.getElementById("containerOne"));
                        //初始化折线图表配置
                        this.lineChartOption.title.text = this.riskPositionName + ' (温度)';
                        this.lineChartOption.series[0].data = res[0].yData;
                        this.lineChartOption.xAxis.data = res[0].xData;
                        if (this.kLineChartOption && typeof this.kLineChartOption === "object") {
                            chart.setOption(this.kLineChartOption);
                        }

                        let chartTwo = this.$echarts.init(document.getElementById("containerTwo"));
                        //初始化折线图表配置
                        this.lineChartOption.title.text = this.riskPositionName + ' (湿度)';
                        this.lineChartOption.series[0].data = res[1].yData;
                        this.lineChartOption.xAxis.data = res[1].xData;
                        if (this.kLineChartOption && typeof this.kLineChartOption === "object") {
                            chartTwo.setOption(this.kLineChartOption);
                        }
                    }
                })
            } else {
                this.$store.dispatch('getDayMeterList', {
                    positionId: this.filters.positionId,
                    year: this.filters.day.split('-')[0],
                    month: this.filters.day.split('-')[1],
                    day: this.filters.day.split('-')[2]
                }).then((res) => {
                    //初始化K线图表
                    let chart = this.$echarts.init(document.getElementById("container"));
                    //初始化折线图表配置
                    this.lineChartOption.title.text = this.riskPositionName;
                    this.lineChartOption.series[0].data = res.yData;
                    this.lineChartOption.xAxis.data = res.xData;
                    if (this.lineChartOption && typeof this.lineChartOption === "object") {
                        chart.setOption(this.lineChartOption);
                    }
                });

            }
        },
        transformKLineChartData: function (rawData) {
            let categoryData = [];
            let values = []
            let MAValue = []
            for (let i = 0; i < rawData.length; i++) {
                categoryData.push(rawData[i].splice(0, 1)[0]);
                MAValue.push(rawData[i].splice(rawData[i].length - 1, 1)[0]);
                values.push(rawData[i])
            }
            return {
                categoryData: categoryData,
                values: values,
                MAValue: MAValue
            };
        },
        initKLineChartOption: function () {
            this.kLineChartOption = {
                title: {
                    text: '',
                    left: 60,
                    top: 24,
                    textStyle: {
                        color: '#faad14',//坐标值得具体的颜色
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    top: 22,
                    data: ['', '平均值'],
                    textStyle: {
                        color: '#faad14',//坐标值得具体的颜色

                    }
                },
                grid: {
                    left: '6%',
                    right: '6%',
                    bottom: '15%'
                },
                xAxis: {
                    type: 'category',
                    data: [],
                    scale: true,
                    axisLabel: {
                        textStyle: {
                            color: '#faad14',//坐标值得具体的颜色

                        }
                    },
                    boundaryGap: true,
                    axisLine: {onZero: false},
                    splitLine: {show: false},
                    splitNumber: 20,
                    min: 'dataMin',
                    max: 'dataMax'
                },
                yAxis: {
                    scale: true,
                    splitArea: {
                        show: true
                    },
                    min: 0,
                    max: 99,
                    axisLabel: {
                        textStyle: {
                            color: '#faad14',//坐标值得具体的颜色

                        }
                    },
                },
                dataZoom: [
                    {
                        type: 'inside',
                        start: 0,
                        end: 100
                    },
                    {
                        show: true,
                        type: 'slider',
                        top: '90%',
                        start: 0,
                        end: 100,
                        textStyle: {
                            color: '#faad14',//坐标值得具体的颜色

                        }
                    }
                ],
                series: [
                    {
                        name: '',
                        type: 'candlestick',
                        data: [],
                        dimensions: [null, '开始值', '结束值', '最低值', '最高值'],
                        encode: {
                            x: 0,
                            y: [1, 2, 3, 4],
                            tooltip: [1, 2, 3, 4]
                        },
                        itemStyle: {
                            color: '#ec0000',
                            color0: '#00da3c',
                            borderColor: '#8A0000',
                            borderColor0: '#008F28'
                        }
                    },
                    {
                        name: '平均值',
                        type: 'line',
                        data: [],
                        smooth: true,
                        lineStyle: {
                            opacity: 0.5
                        }
                    }

                ]
            };
        },
        initLineChartOption: function () {
            this.lineChartOption = {
                title: {
                    text: '',
                    left: 0,
                    top: 24,
                    textStyle: {
                        color: '#faad14',//坐标值得具体的颜色
                        fontSize: 10
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                grid: {
                    left: '6%',
                    right: '6%',
                    bottom: '15%'
                },
                xAxis: {
                    type: 'category',
                    data: [],
                    axisLabel: {
                        textStyle: {
                            color: '#faad14',//坐标值得具体的颜色

                        }
                    },
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 99,
                    axisLabel: {
                        textStyle: {
                            color: '#faad14',//坐标值得具体的颜色

                        }
                    },
                },
                dataZoom: [
                    {
                        type: 'inside',
                        start: 0,
                        end: 100
                    },
                    {
                        show: true,
                        type: 'slider',
                        top: '90%',
                        start: 0,
                        end: 100,
                        textStyle: {
                            color: '#faad14',//坐标值得具体的颜色

                        }
                    }
                ],
                series: [{
                    data: [],
                    type: 'line',
                    smooth: true
                }]
            };
        },
    }
}
